﻿<phone:PhoneApplicationPage x:Class="USElections.Map.Pages.MapPage"
                            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                            xmlns:map="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
                            xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
                            xmlns:nlcontrols="clr-namespace:NorthernLights.Controls;assembly=NorthernLights.Controls"
                            xmlns:telerikChart="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Chart"
                            xmlns:telerikCharting="clr-namespace:Telerik.Charting;assembly=Telerik.Windows.Controls.Chart"
                            xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
                            xmlns:conv="clr-namespace:USElections.Converters;assembly=USElections.Converters"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            FontFamily="{StaticResource PhoneFontFamilyNormal}"
                            FontSize="{StaticResource PhoneFontSizeNormal}"
                            Foreground="{StaticResource PhoneForegroundBrush}"
                            SupportedOrientations="Portrait"
                            Orientation="Portrait"
                            mc:Ignorable="d"
                            d:DesignHeight="696"
                            d:DesignWidth="480"
                            shell:SystemTray.IsVisible="True"
                            shell:SystemTray.Opacity="0"
                            Style="{StaticResource TransitionPageStyle}">
    <phone:PhoneApplicationPage.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/USElections.Map;component/Styles/StateLongListStyle.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
        
        <conv:PartyToColorConverter x:Key="ptc" />
        <conv:CandidateToColorConverter x:Key="ctc" />
    </phone:PhoneApplicationPage.Resources>

    <shell:SystemTray.ProgressIndicator>
        <shell:ProgressIndicator IsIndeterminate="True"
                                 IsVisible="{Binding IsUpdating}"
                                 Text="Download latest data..." />
    </shell:SystemTray.ProgressIndicator>

    <Grid x:Name="LayoutRoot"
          Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <StackPanel x:Name="TitlePanel"
                    Grid.Row="0"
                    Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle"
                       Text="US ELECTIONS - VOTE RESULTS"
                       Style="{StaticResource PhoneTextNormalStyle}" />
        </StackPanel>

        <Grid x:Name="ContentPanel"
              Grid.Row="1"
              Margin="12,0,12,0">

            <controls:Pivot Grid.Row="2"
                            Margin="-12, -24, 0, 0"
                            SelectionChanged="PivotSelectionChanged">
                <controls:PivotItem Header="overview">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <map:Map x:Name="map"
                                 Grid.Row="0"
                                 Margin="12"
                                 Center="54, -110"
                                 CopyrightVisibility="Collapsed"
                                 CredentialsProvider="AgONIDfmyf0XfoMS5NuUZVDU7AEHkRQYVUCw9KG856dnrAb4T9DX2gKzKXxORJCx"
                                 LogoVisibility="Collapsed"
                                 VerticalAlignment="Top"
                                 ZoomLevel="2.1"
                                 IsHitTestVisible="False"
                                 Height="350" />

                        <Grid Grid.Row="1">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>

                            <TextBlock Grid.Row="0"
                                       Text="{Binding Path=TotalVoteCount, StringFormat='Total votes: {0}'}"
                                       Style="{StaticResource PhoneTextLargeStyle}" />
                            <TextBlock Grid.Row="1"
                                       HorizontalAlignment="Left"
                                       Text="{Binding Path=NationalVoteCount, StringFormat='US Citizens: {0}'}"
                                       Style="{StaticResource PhoneTextSubtleStyle}" />
                            <TextBlock Grid.Row="2"
                                       HorizontalAlignment="Left"
                                       Text="{Binding Path=ForeignVoteCount, StringFormat='Non US Citizens: {0}'}"
                                       Style="{StaticResource PhoneTextSubtleStyle}" />
                        </Grid>
                    </Grid>
                </controls:PivotItem>

                <controls:PivotItem Header="electoral">
                    <ScrollViewer>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <TextBlock Grid.Row="0" Text="Electoral vote"
                                       Margin="12, 0, 0, 0"
                                       HorizontalAlignment="Center"
                                       Style="{StaticResource PhoneTextLargeStyle}" />

                            <TextBlock Grid.Row="1" Text="need 270 votes for presidency"
                                       Margin="12, 0, 0, 0"
                                       HorizontalAlignment="Center"
                                       Style="{StaticResource PhoneTextSubtleStyle}" />

                            <telerikChart:RadCartesianChart Grid.Row="2" x:Name="chart"
                                                            Margin="12">
                                <telerikChart:RadCartesianChart.Grid>
                                    <telerikChart:CartesianChartGrid StripLinesVisibility="X">
                                        <telerikChart:CartesianChartGrid.XStripeBrushes>
                                            <SolidColorBrush Color="#FF222222" />
                                            <SolidColorBrush Color="Transparent" />
                                        </telerikChart:CartesianChartGrid.XStripeBrushes>
                                    </telerikChart:CartesianChartGrid>
                                </telerikChart:RadCartesianChart.Grid>

                                <telerikChart:RadCartesianChart.VerticalAxis>
                                    <telerikChart:LinearAxis LineStroke="{StaticResource PhoneDisabledBrush}"
                                                             LineThickness="2"
                                                             LabelFitMode="None"
                                                             Minimum="0"
                                                             MajorStep="25" />
                                </telerikChart:RadCartesianChart.VerticalAxis>

                                <telerikChart:RadCartesianChart.HorizontalAxis>
                                    <telerikChart:CategoricalAxis LineStroke="{StaticResource PhoneDisabledBrush}"
                                                                  LineThickness="2" LabelFitMode="Rotate" />
                                </telerikChart:RadCartesianChart.HorizontalAxis>

                                <telerikChart:BarSeries>
                                    <telerikChart:BarSeries.PointTemplate>
                                        <DataTemplate>
                                            <Rectangle Fill="{Binding Category, Converter={StaticResource ptc}}" />
                                        </DataTemplate>
                                    </telerikChart:BarSeries.PointTemplate>
                                </telerikChart:BarSeries>
                            </telerikChart:RadCartesianChart>
                        </Grid>
                    </ScrollViewer>
                </controls:PivotItem>

                <controls:PivotItem Header="popular">
                    <ScrollViewer>
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <TextBlock Grid.Row="0"
                                       Text="Popular vote"
                                       Margin="12, 0, 0, 0"
                                       HorizontalAlignment="Center"
                                       Style="{StaticResource PhoneTextLargeStyle}" />

                            <telerikChart:RadCartesianChart Grid.Row="1"
                                                            x:Name="chart2"
                                                            Margin="12">
                                <telerikChart:RadCartesianChart.Grid>
                                    <telerikChart:CartesianChartGrid StripLinesVisibility="X">
                                        <telerikChart:CartesianChartGrid.XStripeBrushes>
                                            <SolidColorBrush Color="#FF222222" />
                                            <SolidColorBrush Color="Transparent" />
                                        </telerikChart:CartesianChartGrid.XStripeBrushes>
                                    </telerikChart:CartesianChartGrid>
                                </telerikChart:RadCartesianChart.Grid>

                                <telerikChart:RadCartesianChart.VerticalAxis>
                                    <telerikChart:LinearAxis LineStroke="{StaticResource PhoneDisabledBrush}"
                                                             LineThickness="2"
                                                             LabelFitMode="None"
                                                             Minimum="0" />
                                </telerikChart:RadCartesianChart.VerticalAxis>

                                <telerikChart:RadCartesianChart.HorizontalAxis>
                                    <telerikChart:CategoricalAxis LineStroke="{StaticResource PhoneDisabledBrush}"
                                                                  LineThickness="2"
                                                                  LabelFitMode="Rotate" />
                                </telerikChart:RadCartesianChart.HorizontalAxis>

                                <telerikChart:BarSeries>
                                    <telerikChart:BarSeries.PointTemplate>
                                        <DataTemplate>
                                            <Rectangle Fill="{Binding Category, Converter={StaticResource ctc}}" />
                                        </DataTemplate>
                                    </telerikChart:BarSeries.PointTemplate>
                                </telerikChart:BarSeries>
                            </telerikChart:RadCartesianChart>
                        </Grid>
                    </ScrollViewer>
                </controls:PivotItem>
                
                <controls:PivotItem Header="per state">
                    <Grid>
                        <toolkit:LongListSelector x:Name="longlist"
                                                  Background="Transparent"
                                                  ListHeaderTemplate="{StaticResource statesListHeader}"
                                                  GroupHeaderTemplate="{StaticResource statesGroupHeader}"
                                                  GroupItemTemplate="{StaticResource statesGroupItem}"
                                                  ItemTemplate="{StaticResource statesItemTemplate}"
                                                  GroupViewOpened="LongListSelector_GroupViewOpened"
                                                  GroupViewClosing="LongListSelector_GroupViewClosing">
                            <toolkit:LongListSelector.GroupItemsPanel>
                                <ItemsPanelTemplate>
                                    <StackPanel Orientation="Vertical" />
                                    <!--<toolkit:WrapPanel Orientation="Vertical" />-->
                                </ItemsPanelTemplate>
                            </toolkit:LongListSelector.GroupItemsPanel>
                        </toolkit:LongListSelector>
                    </Grid>
                </controls:PivotItem>
            </controls:Pivot>
        </Grid>

        <nlcontrols:Notification x:Name="notification" />
    </Grid>

    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True"
                              IsMenuEnabled="True">
            <!--<shell:ApplicationBarIconButton IconUri="/Icons/appbar.map.centerme.rest.png"
                                            Text="center"
                                            Click="ApplicationBarIconButtonClick" />-->
            <shell:ApplicationBarIconButton IconUri="/Icons/appbar.refresh.rest.png"
                                            Text="refresh"
                                            Click="ApplicationBarIconButtonClick" />
            <shell:ApplicationBarIconButton IconUri="/Icons/appbar.share.rest.png"
                                            Text="share"
                                            Click="ApplicationBarIconButtonClick" />
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>